<template>
  <div class="tts-example">
    <a-card title="TTS播放按钮使用示例" class="example-card">
      <!-- 登录状态提示 -->
      <div v-if="!authStore.isLoggedIn" class="login-notice">
        <a-alert
          message="需要登录"
          description="使用TTS功能需要先登录，请先登录后再试。"
          type="warning"
          show-icon
          closable
        />
      </div>
      <!-- 基础用法 -->
      <div class="example-section">
        <h3>基础用法</h3>
        <a-space direction="vertical" size="middle" style="width: 100%">
          <a-textarea
            v-model:value="sampleText"
            :rows="3"
            placeholder="输入要播放的文本..."
            show-count
            :maxlength="500"
          />
          <TTSPlayButton
            :message="sampleText"
            @start="onPlayStart"
            @playing="onPlaying"
            @completed="onCompleted"
            @error="onError"
          />
        </a-space>
      </div>

      <!-- 不同尺寸 -->
      <a-divider />
      <div class="example-section">
        <h3>不同尺寸</h3>
        <a-space>
          <TTSPlayButton
            message="这是小尺寸按钮"
            size="small"
            type="primary"
          />
          <TTSPlayButton
            message="这是中等尺寸按钮"
            size="middle"
            type="primary"
          />
          <TTSPlayButton
            message="这是大尺寸按钮"
            size="large"
            type="primary"
          />
        </a-space>
      </div>

      <!-- 不同类型 -->
      <a-divider />
      <div class="example-section">
        <h3>不同类型</h3>
        <a-space wrap>
          <TTSPlayButton
            message="Primary按钮"
            type="primary"
          />
          <TTSPlayButton
            message="Default按钮"
            type="default"
          />
          <TTSPlayButton
            message="Dashed按钮"
            type="dashed"
          />
          <TTSPlayButton
            message="Link按钮"
            type="link"
          />
          <TTSPlayButton
            message="Text按钮"
            type="text"
          />
        </a-space>
      </div>

      <!-- 只显示图标 -->
      <a-divider />
      <div class="example-section">
        <h3>只显示图标</h3>
        <a-space>
          <TTSPlayButton
            message="这是只显示图标的按钮"
            :show-text="false"
            type="primary"
            size="large"
          />
          <TTSPlayButton
            message="这是另一个只显示图标的按钮"
            :show-text="false"
            type="default"
          />
        </a-space>
      </div>

      <!-- 模拟数据模式 -->
      <a-divider />
      <div class="example-section">
        <h3>模拟数据模式（使用Web Speech API）</h3>
        <a-space direction="vertical">
          <a-alert
            message="提示"
            description="模拟模式使用浏览器内置的Web Speech API，不需要WebSocket连接"
            type="info"
            show-icon
          />
          <TTSPlayButton
            message="这是使用模拟数据的语音播放，你好世界！"
            :enable-mock-data="true"
            type="primary"
          />
        </a-space>
      </div>

      <!-- 聊天消息中的使用 -->
      <a-divider />
      <div class="example-section">
        <h3>聊天消息中的使用</h3>
        <div class="chat-messages">
          <div
            v-for="msg in chatMessages"
            :key="msg.id"
            class="chat-message"
            :class="{ 'user-message': msg.isUser, 'bot-message': !msg.isUser }"
          >
            <div class="message-content">
              <div class="message-text">{{ msg.content }}</div>
              <div class="message-actions" v-if="!msg.isUser">
                <TTSPlayButton
                  :message="msg.content"
                  :show-text="false"
                  size="small"
                  type="text"
                  @start="() => onMessagePlayStart(msg.id)"
                  @completed="() => onMessagePlayCompleted(msg.id)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 状态显示 -->
      <a-divider />
      <div class="example-section">
        <h3>播放状态</h3>
        <a-descriptions :column="2" bordered size="small">
          <a-descriptions-item label="当前状态">{{ currentStatus }}</a-descriptions-item>
          <a-descriptions-item label="播放次数">{{ playCount }}</a-descriptions-item>
          <a-descriptions-item label="最后播放时间">{{ lastPlayTime || '暂无' }}</a-descriptions-item>
          <a-descriptions-item label="错误信息">{{ lastError || '无' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { useAuthStore } from '@/stores'
import TTSPlayButton from './TTSPlayButton.vue'

// 获取认证store
const authStore = useAuthStore()

// 示例文本
const sampleText = ref('你好，这是一个文本转语音的示例。Text-to-Speech功能可以将文字转换为语音播放。')

// 播放状态
const currentStatus = ref('等待中')
const playCount = ref(0)
const lastPlayTime = ref('')
const lastError = ref('')

// 聊天消息示例
const chatMessages = ref([
  {
    id: 1,
    content: '你好，我是AI助手，有什么可以帮助你的吗？',
    isUser: false
  },
  {
    id: 2,
    content: '请介绍一下文本转语音功能',
    isUser: true
  },
  {
    id: 3,
    content: '文本转语音（Text-to-Speech，简称TTS）是一种将文字转换为语音的技术。它可以帮助用户通过听觉获取文本信息，特别适用于视觉障碍用户、多任务场景或者想要解放双眼的情况。',
    isUser: false
  },
  {
    id: 4,
    content: '这个功能很实用，谢谢！',
    isUser: true
  },
  {
    id: 5,
    content: '不客气！如果你还有其他问题，随时可以问我。我们的TTS功能支持多种语音类型和播放控制，让你有更好的使用体验。',
    isUser: false
  }
])

// 事件处理函数
const onPlayStart = () => {
  currentStatus.value = '开始播放'
  playCount.value++
  lastPlayTime.value = new Date().toLocaleTimeString()
  message.info('开始播放语音')
}

const onPlaying = () => {
  currentStatus.value = '正在播放'
}

const onCompleted = () => {
  currentStatus.value = '播放完成'
  message.success('语音播放完成')
}

const onError = (error: string) => {
  currentStatus.value = '播放错误'
  lastError.value = error
  message.error(`播放失败: ${error}`)
}

const onMessagePlayStart = (messageId: number) => {
  message.info(`开始播放消息 ${messageId}`)
}

const onMessagePlayCompleted = (messageId: number) => {
  message.success(`消息 ${messageId} 播放完成`)
}
</script>

<style scoped>
.tts-example {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-card {
  margin-bottom: 20px;
}

.login-notice {
  margin-bottom: 24px;
}

.example-section {
  margin-bottom: 24px;
}

.example-section h3 {
  margin-bottom: 16px;
  color: #1890ff;
  font-weight: 600;
}

.chat-messages {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 16px;
  background-color: #fafafa;
}

.chat-message {
  margin-bottom: 16px;
  display: flex;
}

.user-message {
  justify-content: flex-end;
}

.user-message .message-content {
  background-color: #1890ff;
  color: white;
  max-width: 70%;
}

.bot-message {
  justify-content: flex-start;
}

.bot-message .message-content {
  background-color: white;
  border: 1px solid #d9d9d9;
  max-width: 70%;
}

.message-content {
  padding: 12px 16px;
  border-radius: 8px;
  position: relative;
}

.message-text {
  line-height: 1.5;
  word-break: break-word;
}

.message-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.bot-message .message-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}
</style>